<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1100px">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="调拨单号" prop="transferNo">
          <el-input
            v-model="queryParams.transferNo"
            placeholder="请输入调拨单号"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item label="调出仓库" prop="outWarehouseId">
          <el-select
            v-model="queryParams.outWarehouseId"
            placeholder="请输入调出仓库"
            :clearable="true"
          >
            <el-option
              v-for="dict in materialWarehouse"
              :key="dict.id"
              :label="dict.warehouseName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="调入仓库" prop="inWarehouseId">
          <el-select
            v-model="queryParams.inWarehouseId"
            placeholder="请输入调入仓库"
            :clearable="true"
          >
            <el-option
              v-for="dict in materialWarehouse"
              :key="dict.id"
              :label="dict.warehouseName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            :clearable="true"
            multiple
            :disabled="isStatusDisabled"
          >
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.MATERIAL_TRANSFER_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="MaterialInfoSelect"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
        @row-click="handleTableClick"
      >
        <template #outWarehouseId="{ row }">
          {{ materialWarehouse.find((obj) => obj.id === row.outWarehouseId).warehouseName }}
        </template>
        <template #inWarehouseId="{ row }">
          {{ materialWarehouse.find((obj) => obj.id === row.inWarehouseId).warehouseName }}
        </template>
        <template #status="{ row }">
          {{ getDictObj(DICT_TYPE.MATERIAL_TRANSFER_STATUS, row.status).label }}
        </template>
      </Table>
    </ContentWrap>
    <ContentWrap class="h-[230px]">
      <Table :columns="detailColumns" :data="detailInfoList" />
    </ContentWrap>
  </Dialog>
</template>
<script setup name="MaterialInfoSelect" lang="ts">
import * as MaterialWarehouseApi from '@/api/material/warehouse'
import * as MaterialTransferApi from '@/api/material/transfer'
import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
import * as materialTransferDetailModel from '@/model/material/order/MaterialTransferDetail'
const detailInfoList = ref<materialTransferDetailModel.MaterialTransferDetail[]>([]) // 选中的字段列表
const dialogTitle = ref('')
const dialogVisible = ref(false)
const isStatusDisabled = ref(false)
const queryFormRef = ref()
const queryParams = ref({
  transferNo: undefined,
  outWarehouseId: undefined,
  inWarehouseId: undefined,
  status: undefined
})
const queryData = ref()
const materialWarehouse = ref()
const emit = defineEmits(['selectValue'])
const columns = [
  {
    label: '调拨单号',
    prop: 'transferNo'
  },
  {
    label: '调出仓库',
    prop: 'outWarehouseId',
    slot: 'outWarehouseId'
  },
  {
    label: '调入仓库',
    prop: 'inWarehouseId',
    slot: 'inWarehouseId'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '状态',
    prop: 'status',
    slot: 'status'
  },
  {
    label: '联系人姓名',
    prop: 'contactName'
  },
  {
    label: '联系人电话',
    prop: 'contactMobile'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]

const detailColumns = [
  {
    label: '物资名称',
    prop: 'material.materialName'
  },
  {
    label: '物资类别名称',
    prop: 'material.category.categoryName'
  },
  {
    label: '销售单价',
    prop: 'material.price'
  },
  {
    label: '物资规格',
    prop: 'material.materialSpecification'
  },
  {
    label: '数量',
    prop: 'number'
  },
  {
    label: '已出库数量',
    prop: 'outNumber'
  },
  {
    label: '已入库数量',
    prop: 'inNumber'
  },
  {
    label: '批次号',
    prop: 'batchNo',
    slot: 'batchNo'
  },
  {
    label: '生产日期',
    prop: 'productionDate',
    slot: 'productionDate',
    minWidth: '130'
  },
  {
    label: '有效期',
    prop: 'expireDate',
    slot: 'expireDate',
    minWidth: '130'
  }
]

/** 打开弹窗 */
const open = async (params) => {
  dialogVisible.value = true
  isStatusDisabled.value = false
  detailInfoList.value = []
  materialWarehouse.value = await MaterialWarehouseApi.simpleList()
  if (params != undefined && params['status'] !== undefined) {
    queryParams.value.status = params['status']['value']
    isStatusDisabled.value = params['status']['isDisabled']
  }
  handleClickSearch()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await MaterialTransferApi.pageQuery(queryParams.value)
}

/** 双击table列操作  */
const handleTableDblclick = (row) => {
  emit('selectValue', { order: row, details: detailInfoList.value })
  close()
}

/** 单击table列操作  */
const handleTableClick = async (row) => {
  detailInfoList.value = await MaterialTransferApi.singleGetDetail(row.id)
}

/** 关闭弹窗 */
const close = async () => {
  dialogVisible.value = false
}
</script>
